<template>
    <div class="wrapper">
        <div class="search-wrapper">
          <div class="search-wrapper2">
            <el-form :inline="true" :model="searchList" class="demo-form-inline">
              <el-form-item label="用户名">
                  <el-input v-model="searchList.name" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item label="产品线">
                <el-input v-model="searchList.line" placeholder="产品线"></el-input>
              </el-form-item>
              <el-form-item label="行业">
                <!-- <el-select v-model="formInline.region" placeholder="行业">
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select> -->
                <el-input v-model="searchList.area" placeholder="行业"></el-input>
              </el-form-item>
              <!-- <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
              </el-form-item> -->
            </el-form>

            <el-form :inline="true" :model="searchList" class="demo-form-inline">
              <el-form-item label="开始结束时间">
                  <el-input v-model="searchList.start" placeholder="开始时间"></el-input>
              </el-form-item>
              <el-form-item label="~">
                  <el-input v-model="searchList.end" placeholder="结束时间"></el-input>
              </el-form-item>
              <el-form-item label="">
                  <el-button type="primary" @click="searchUser(searchList)">搜索</el-button>
              </el-form-item>
            </el-form>            
          </div>
        </div>

        <div class="form-wrapper">
            <el-table size="small" :data="listData.slice((pageparm.pageNo-1)*pageparm.pageSize,pageparm.pageNo*pageparm.pageSize)" highlight-current-row  border  >
                <el-table-column align="center" type="selection" width="60">
                </el-table-column>
                <el-table-column sortable prop="userName" label="用户名" >
                </el-table-column>
                <el-table-column sortable prop="line" label="产品线" >
                </el-table-column>
                <el-table-column sortable prop="area" label="行业" >
                </el-table-column>
                <el-table-column sortable prop="start" label="开始时间" >
                </el-table-column>
                <el-table-column sortable prop="end" label="结束时间" >
                </el-table-column>

                <el-table-column align="center" label="操作" >
                    <template slot-scope="scope">
                        <!-- <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                        <el-button size="mini" type="primary" @click="toExamine(scope.$index)">审核</el-button>
                        <el-button size="mini" type="primary" @click="deleteUser(scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageparm.pageNo"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageparm.pageSize"
      :total="total">
    </el-pagination>



    </div>
</template>

<script>

  
  import {reqUserList, deleteUser,searchUser2} from '@/api'

  export default {
    data() {
      return {
        listData: [

        ],
        total: 0,
        searchList: {
          name: '',
          line: '',
          area: '',
          start: '',
          end: '',
        },
        pageparm: {
          pageNo: 1,
          pageSize: 3,
        }
      }
    },
    
    created() {
      this.getData()
      
    },
  
   
    methods: {
      
      async getData() {
        let result = await reqUserList();
        if(result.code == 200) {
          this.listData = result.data;
        }
        this.total = this.listData.length
      },
      async deleteUser(param) {
        let result = await deleteUser();
        if(result.code == 200) {
          this.listData = result.data;
        }
      },

      async searchUser(params) {
        console.log(params)

        let result = await searchUser2(params);
        if(result.code == 200) {
          this.listData = result.data;
        }
        this.total = result.data.length;
        //console.log(result)
      },

      toExamine(index) {
        
        this.$router.push({
          path: `/examinepage/${index}`,
					
        });
      },

    
      handleSizeChange(pageSize) {
        // 处理分页大小改变事件
        this.pageparm.pageSize = pageSize
        this.getData();
      },
      handleCurrentChange(currentPage) {
        // 处理当前页码改变事件
        this.pageparm.pageNo = currentPage
        this.getData();
      },
    }
  }
  </script>
  
  <style scoped>
  .user-search {
    margin-top: 20px;
  }
  .userRole {
    width: 100%;
  }

  .search-wrapper {
    display: inline-block;
    text-align: center;

    display: flex;
    justify-content: center;
    
    padding: 20px;
  }

  .form-wrapper {
    padding: 20px;
  } 
 
  
  </style>